<template>
  <div
    class="analysis-box"
    :class="[exportStatus ? 'analysis-box-export' : '']"
  >
    <!-- 多条折线 -->
    <ModeA
      v-if="tdata && tdata['datatype'] === 0"
      :dcData="dcData"
      :chartTempl="chartTempl"
    />
    <!-- 当条折线 -->
    <ModeB
      v-if="tdata && tdata['datatype'] === 1"
      :dcData="dcData"
      :chartTempl="chartTempl"
    />
    <!-- 地图map -->
    <ModeC
      v-if="tdata && tdata['datatype'] === 2"
      :dcData="dcData"
      :chartTempl="chartTempl"
    />
    <!-- 嵌套饼图 -->
    <ModeD
      v-if="tdata && tdata['datatype'] === 3"
      :dcData="dcData"
      :chartTempl="chartTempl"
    />
    <!-- 关系图graph -->
    <ModeE
      v-if="tdata && tdata['datatype'] === 4"
      :dcData="dcData"
      :chartTempl="chartTempl"
    />
    <!-- 二维分析图 由于数据格式专利与论文不同 -->
    <ModeF
      v-if="tdata && tdata['datatype'] === 5"
      :dcData="dcData"
      :chartTempl="chartTempl"
    />
    <!-- 河道图 -->
    <ModeG
      v-if="tdata && tdata['datatype'] === 6"
      :dcData="dcData"
      :chartTempl="chartTempl"
    />
    <!-- 词云图 -->
    <ModeH
      v-if="tdata && tdata['datatype'] === 7"
      :dcData="dcData"
      :chartTempl="chartTempl"
    />
    <!-- 折线与柱状混合 -->
    <ModeI
      v-if="tdata && tdata['datatype'] === 8"
      :dcData="dcData"
      :chartTempl="chartTempl"
    />
    <!-- 共现网络图 -->
    <ModeJ
      v-if="tdata && tdata['datatype'] === 9"
      :dcData="dcData"
      :chartTempl="chartTempl"
    />
    <!-- 相关性分析 -->
    <ModeK
      v-if="tdata && tdata['datatype'] === 10"
      :dcData="dcData"
      :chartTempl="chartTempl"
    />
    <!-- 技术前沿领域分析 -->
    <ModeL
      v-if="tdata && tdata['datatype'] === 11"
      :dcData="dcData"
      :chartTempl="chartTempl"
    />
    <!-- 技术生命周期 -->
    <ModeM
      v-if="tdata && tdata['datatype'] === 12"
      :dcData="dcData"
      :chartTempl="chartTempl"
    />
    <!-- 技术成熟度 -->
    <ModeN
      v-if="tdata && tdata['datatype'] === 13"
      :dcData="dcData"
      :chartTempl="chartTempl"
    />
    <!-- 技术趋势路线图 -->
    <ModeP
      v-if="tdata && tdata['datatype'] === 14"
      :dcData="dcData"
      :chartTempl="chartTempl"
    />
    <!-- 专利趋势分析图 -->
    <ModeQ
      v-if="tdata && tdata['datatype'] === 15"
      :dcData="dcData"
      :chartTempl="chartTempl"
    />
    <!-- 专利趋势分析(新设计包含总量，实用新型，发明专利)-->
    <ModeR
      v-if="tdata && tdata['datatype'] === 16"
      :dcData="dcData"
      :chartTempl="chartTempl"
    />
    <!-- 法律状态趋势分析-->
    <ModeS
      v-if="tdata && tdata['datatype'] === 17"
      :dcData="dcData"
      :chartTempl="chartTempl"
    />
    <!-- 国内申请人类别分析-->
    <ModeT
      v-if="tdata && tdata['datatype'] === 18"
      :dcData="dcData"
      :chartTempl="chartTempl"
    />

    <!-- 国内外趋势分析-->
    <ModeU
      v-if="tdata && tdata['datatype'] === 19"
      :dcData="dcData"
      :chartTempl="chartTempl"
    />
    <!-- 学者与机构合作关系图-->
    <ModeV
      v-if="tdata && tdata['datatype'] === 20"
      :dcData="dcData"
      :chartTempl="chartTempl"
    />
    <!-- 主要发明人排名-->
    <ModeW
      v-if="tdata && tdata['datatype'] === 21"
      :dcData="dcData"
      :chartTempl="chartTempl"
    />
  </div>
</template>

<script>
import { mapState } from "vuex";
import ModeA from "./ModeA";
import ModeB from "./ModeB";
import ModeC from "./ModeC";
import ModeD from "./ModeD";
import ModeE from "./ModeE";
import ModeF from "./ModeF";
import ModeG from "./ModeG";
import ModeH from "./ModeH";
import ModeI from "./ModeI";
import ModeJ from "./ModeJ";
import ModeK from "./ModeK";
import ModeL from "./ModeL";
import ModeM from "./ModeM";
import ModeN from "./ModeN";
import ModeP from "./ModeP";
import ModeQ from "./ModeQ";
import ModeR from "./ModeR";
import ModeS from "./ModeS";
import ModeT from "./ModeT";
import ModeU from "./ModeU";
import ModeV from "./ModeV";
import ModeW from "./ModeW";
export default {
  components: {
    ModeA,
    ModeB,
    ModeC,
    ModeD,
    ModeE,
    ModeF,
    ModeG,
    ModeH,
    ModeI,
    ModeJ,
    ModeK,
    ModeL,
    ModeM,
    ModeN,
    ModeP,
    ModeQ,
    ModeR,
    ModeS,
    ModeT,
    ModeU,
    ModeV,
    ModeW,
  },
  data() {
    return {
      chartTempl: {},
      tdata: {},
      dcData: {},
      exportStatus: this.$route.query.export || false,
      emptyText: "加载中...",
    };
  },
  computed: {
    ...mapState(["curChartTempl"]),
  },
  mounted() {
    window.echartImg = null;
    this.$Bus.$on("dcData", (data) => {
      if (data?.chartTempl) {
        this.chartTempl = data.chartTempl || {};
        this.tdata = data.chartTempl.tdata || { datatype: 1 };
      } else {
        this.tdata = { datatype: -1 };
      }
      this.dcData = data;
      this.getChartTempl();
      console.log(555, this.tdata["datatype"])
    });
  },
  methods: {
    // 切换左侧目录树
    getChartTempl() {
      window.echartImg = null;
      if (Object.keys(this.curChartTempl).length > 0) {
        this.chartTempl = JSON.parse(JSON.stringify(this.curChartTempl));
        this.tdata = this.chartTempl.tdata || { datatype: 0 };
        console.log("切换左侧目录树:", this.tdata);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.analysis-box {
  position: relative;
  width: 100%;
  // height: calc(100vh - 0.7rem - 40px - 40px - 70px);
  // overflow-y: auto;
  padding-bottom: 20px;
  ::v-deep .chart-tab-ul {
    padding-left: 0 !important;
  }
}
.analysis-box-export {
  ::v-deep .tools-box {
    display: none !important;
  }
}
</style>
